﻿<!doctype html>
<html lang="en">

	<head>
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Expires" content="0">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>训练</title>
		<link rel="stylesheet" href="static/plugsin/css/font-awesome-4.7.0/css/font-awesome.css">
		<!-- begin::global styles -->
		<link rel="stylesheet" href="static/assets/vendors/bundle.css" type="text/css">
		<!-- end::global styles -->

		<!-- begin::custom styles -->
		<link rel="stylesheet" href="static/assets/css/app.css" type="text/css">
		<link rel="stylesheet" href="static/assets/css/custom.css" type="text/css">
        <link rel="stylesheet" type="text/css" href="static/assets/css/sweetalert.css">
        <script type="text/javascript" src="static/assets/js/sweetalert.js"></script>

		<!-- end::custom styles -->
		<style>
        .myButton {
            background-color:#44c767;
            border-radius:21px;
            border:1px solid #18ab29;
            display:inline-block;
            cursor:pointer;
            color:#ffffff;
            font-family:Times New Roman;
            font-size:20px;
            font-weight:bold;
            padding:13px 16px;
            text-decoration:none;
            text-shadow:0px 1px 1px #2f6627;
        }
        .myButton:hover {
            background-color:#5cbf2a;
        }
        .myButton:active {
            position:relative;
            top:1px;
        }

			.c1 {
            padding: 5px 5px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
            .column {
            float: left;
            width: 42%;
            padding:20px;
            margin:40px;
        }
            .a{
                width: 400px;
                height:400px;
                padding: 5px;
                background-image: url({{ url_for('static', filename='image/file.png') }});
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                border: 2px solid #ccc;
                border-radius: 5px;
                margin-bottom: 20px;
            }
            .a:hover{
                border: 1px solid red;
                cursor: pointer;
                opacity: 0.5;
            }

            .c2{
                padding: 10px 10px;
                background-color: #4CAF50;
                color: #fff;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            .double-input3 {
                width: 400px;
                height:400px;
                flex-direction: column;
                align-items: center;
                text-align: center;
                {#flex-basis: 50%;#}
                {#flex :1;#}
                {#justify-content :space-around;#}
                {#flex :1;#}
            }
            .double-input {
                width: 400px;
                height:400px;
            }
            .double-input4 {
                width: 400px;
                height:400px;
                display: flex;
            }
            .input-wrapper-0 {
                width: 1000px;
                height: 400px;
                display: flex;
                border: 0px solid red;
                justify-content :space-around;
                margin-bottom: 50px;
            }
            .input-wrapper-1 {
                width: 1000px;
                height: 200px;
                display: flex;
                border: 0px solid red;
                justify-content :space-around;
                margin-bottom: 0px;
            }
            .double-input1 {
                width: 200px;
                height:400px;
                text-align: right;
            }
            .double-input2 {
                width: 200px;
                height:400px;
                text-align: left;
            }
            .c3{
                padding-bottom: 20px;
            }
            .input-wrapper-2 {
                width: 1050px;
                height: 50px;
                display: flex;
                border: 0px solid red;
                justify-content :space-around;
                margin-bottom: 0px;
            }
            .double-input5 {
                width: 410px;
                height: 50px;
                border: 0px solid red;
            }
            .double-input6 {
                width: 420px;
                height:50px;
                text-align: right;
                {#padding-left: 10px;#}
                border: 0px solid red;
            }
        .input-wrapper-3 {
                width: 500px;
                height: 250px;
                display: flex;
                border: 0px solid red;
                justify-content :space-around;
                margin-bottom: 0px;
            }
            .double-input7{
                width: 250px;
                height: 250px;
            }
             .e{
                border-radius: 5px;
               padding: 10px;
               border: 1px solid;
               background-color: #f7f7f7;
            }
            .dropdown {
                {#position: absolute;#}
                z-index: 2;
            }

     </style>
	</head>
	<body>

		<!-- begin::page loader-->
{#        <div id="loading-animation">#}
            <div class="page-loader" id="loading-animation">
                <div class="spinner-border"></div>
                <span>Loading ...</span>
            </div>
{#        </div>#}
		<!-- end::page loader -->


		<!-- begin::side menu -->
		<div class="side-menu">
			<div class='side-menu-body'>
				<ul>
					<li class="side-menu-divider">Navigation</li>
					<li style="margin-bottom: 20px">
						<a href="/upload_train">
							<i class="icon ti-files"></i>
							<span style="font-size:large">训练</span>
						</a>

					</li>
					<li style="margin-bottom: 20px">
						<a href="/upload_test" onclick="clearCacheAndRedirect(event)">
							<i class="icon ti-file"></i>
							<span style="font-size: large">测试</span>
						</a>
					</li>
					<li style="margin-bottom: 20px">
						<a href="/show_result">
							<i class="icon ti-layout"></i>
							<span style="font-size: large">结果可视化</span>
						</a>
					</li>
					<li style="margin-bottom: 20px">
						<a href="/pro_info">
							<i class="icon ti-comment-alt"></i>
							<span style="font-size:large">产品说明</span>
						</a>
					</li>
					<li style="margin-bottom: 20px">
						<a href="/">
							<i class="icon ti-world"></i>
							<span style="font-size: large">返回主页</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- end::side menu -->

		<!-- begin::navbar -->
		<nav class="navbar">
			<div class="container-fluid">

				<div class="header-logo">
					<a href="#">
						<img src="static/assets/media/image/team_logo.png" alt="...">
                <span class="logo-text d-none d-lg-block" style="font-family: Aa阳关曲;font-size: x-large">Eyenergy</span>
					</a>
				</div>

				<div class="header-body">
					<ul class="navbar-nav">
						<li class="nav-item dropdown d-none d-lg-block">
							<a href="#" class="nav-link" data-toggle="dropdown">
								<i class="fa fa-th-large"></i>
							</a>
					</ul>
				</div>

			</div>
		</nav>
		<!-- end::navbar -->

		<!-- begin::main content -->
		<main class="main-content">

			<div class="container-fluid">

				<!-- begin::page header -->
				<div class="page-header d-md-flex justify-content-between align-items-center">
					<h4>训练</h4>
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb m-t-0">
							<li class="breadcrumb-item" style="font-size: 15px;font-family: 微软雅黑">批量上传</li>
                            <li class="breadcrumb-item" style="font-size: 15px;font-family: 微软雅黑">选择参数</li>
                            <li class="breadcrumb-item" style="font-size: 15px;font-family: 微软雅黑">训练情况展示</li>
                            <li class="breadcrumb-item" style="font-size: 15px;font-family: 微软雅黑">参数解释</li>
{#							<li class="breadcrumb-item active" aria-current="page" style="font-size: 15px;font-family: 微软雅黑">选择参数</li>#}
						</ol>
					</nav>
				</div>

			<!-- end::page header -->

			{# <div class="row">#}
				<div class="card">
					<div class="card-body">
                        <div class="card-header">
							<h5 class="card-title">
								<strong>上传训练集</strong>
								<i style="font-size: small;color: grey;">(训练集、模型名称为 <code class="highlighter-rouge">必填项</code> 验证集为 <code class="highlighter-rouge">选填项</code>)</i>
							</h5>
							{# <i style="font-size: small;color: grey;">支持 <code class="highlighter-rouge">单条或批量</code> 测试</i>#}
						</div>

						<div class="form-group">
							<div class="column">
                                <a id="item"></a>
								<form action="/upload_train" method="post" enctype="multipart/form-data" id="train_form" onsubmit="return false;">

                                    <div class="input-wrapper-0">
                                        <div class="double-input3">
                                            <i class="fa fa-file-excel-o" aria-hidden="true" style="font-size: 18px"><strong>上传训练数据</strong></i>
                                            <input type="file" name="train-file1" class="a" required/>
                                        </div>
                                        <div class="double-input3">
                                            <i class="fa fa-file-excel-o" aria-hidden="true" style="font-size: 18px"><strong>上传验证数据</strong></i>
                                            <input type="file" name="train-file2" class="a" />
                                        </div>
                                    </div>

                                    <div class="card">
							            <h5 class="card-body">
								           <strong>修改参数</strong>
								         <a href="#explain" style="font-size: 15px;color:lightskyblue"> 点这里查看参数解释</a>
                                            <div style="margin-top: 20px"></div>
                                            <p style="font-size: 15px;margin-bottom: -10px"><strong> [系统可能需要几分钟来完成训练，具体完成时间取
决于训练集和验证集大小，请耐心等待...]</strong></p>
							            </h5>
						             </div>

                                    <div class="input-wrapper-1">
                                        <div class="double-input">
                                            <details open class="dropdown">
                                                <input type="text" id="model_name" name="model_name" required>
                                                <span class="required" style="color:red">*</span>
                                                <summary style="font-size: large;">模型名称<i style="font-size:small"> (仅支持ascii码)</i></summary>
                                            </details>

                                            <details class="dropdown">
                                                <input type="number" step="0.001" id="lr" name="lr" required>
                                                <span class="required" style="color:red">*</span>
                                                <summary style="font-size: large;">学习率</summary>
                                            </details>

                                            <details class="dropdown">
                                                <input type="number" step="0.001" id="l1_penalty" name="l1_penalty" required>
                                                <span class="required" style="color:red">*</span>
                                                <summary style="font-size: large;">L1正则化系数</summary>
                                            </details>
                                            <details class="dropdown">
                                                <input type="text" id="loss_weight1" name="loss_weight1" required>
                                                <span class="required" style="color:red">1</span>
                                                <input type="text" id="loss_weight2" name="loss_weight2" required>
                                                <span class="required" style="color:red">2</span>
                                                <input type="text" id="loss_weight3" name="loss_weight3" required>
                                                <span class="required" style="color:red">3</span>
                                                <input type="text" id="loss_weight4" name="loss_weight4" required>
                                                <span class="required" style="color:red">4</span>
                                                <input type="text" id="loss_weight5" name="loss_weight5" required>
                                                <span class="required" style="color:red">5</span>
                                                <input type="text" id="loss_weight6" name="loss_weight6" required>
                                                <span class="required" style="color:red">6</span>
                                                <summary style="font-size: large;">类别损失权重<i style="font-size:small"> (数字代表类别号)</i></summary>
                                            </details>
                                        </div>
                                            <div class="double-input4">
                                                <div class="double-input2">
                                                    <details class="dropdown">
                                                        <input type="number" step="0.000001" id="l2_penalty" name="l2_penalty" required>
                                                        <span class="required" style="color:red">*</span>
                                                        <summary style="font-size: large">L2正则化系数</summary>
                                                    </details>
                                                    <details class="dropdown">
                                                        <input type="number" id="epochs" name="epochs" required>
                                                        <span class="required" style="color:red">*</span>
                                                        <summary style="font-size: large">训练轮数</summary>
                                                    </details>

                                                    <details class="dropdown">
                                                        <input type="number" id="step_size" name="step_size" required>
                                                        <span class="required" style="color:red">*</span>
                                                        <summary style="font-size: large">学习率衰减步长</summary>
                                                    </details>
                                                    <details class="dropdown">
                                                        <input type="number" step="0.001" id="gamma" name="gamma" required>
                                                        <span class="required" style="color:red">*</span>
                                                        <summary style="font-size: large">学习率衰减率</summary>
                                                    </details>
                                                    <details class="dropdown">
                                                        <input type="number" step="0.001" id="momentum" name="momentum" required>
                                                        <span class="required" style="color:red">*</span>
                                                        <summary style="font-size: large">动量</summary>
                                                    </details>
                                                </div>
                                                <div class="double-input1">
                                                    <div class="c3">
                                                        <input type="submit" value="开始训练" class="myButton" id="train_button" onclick="handleSubmit()">
                                                    </div>
                                                </div>
                                            </div>
                                    </div>

								</form>
                                <div class="input-wrapper-2">
                                    <div class="double-input5"></div>
                                    <div class="double-input5"></div>
                                    <div class="double-input6">
                                        <form action="/download_file" method="post">
                                                    <select name="downloadModel" class="e">
                                                                {% for entry in entries_1 %}
                                                                <option style="font-size:15px;font-family:'Times New Roman'" value="{{ entry }}">{{ entry }}</option>
                                                                {% endfor %}
                                                            </select>

                                                    <button type="submit" class="myButton">下载模型文件</button>
                                                </form>
                                    </div>
                                </div>

								{#<iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>#}
							</div>
						</div>
{#						<p style="text-align:center">请选择 <code class="highlighter-rouge">csv</code> 文件进行上传</code>.</p>#}
					</div>
                </div>
				<!--两个图-->
                <div class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <img src="static/pics/训练集和验证集的F1值.svg" alt="正在等待用户进行训练..." style="height:370px;width:560px">
                            </div>
                        </div>


                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <img src="static/pics/训练集和验证集的损失函数值.svg" alt="正在等待用户进行训练..." style="height:370px;width:560px">
                            </div>
                        </div>

                    </div>
                     <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <img src="static/pics/验证集最优混淆图.svg" alt="正在等待用户进行训练..." style="width: 100%; height: 100%;">
                    </div>
                </div>
            </div>
                    <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                         <div class="input-wrapper-3">
                             <div class="double-input7">
                                 <details>
                                     <p id="loss1"></p>
                                     <summary style="font-size: large;">最小验证损失</summary>
                                 </details>

                                 <details>
                                     <p id="loss2"></p>
                                     <summary style="font-size: large;">最小验证损失位置</summary>
                                 </details>

                                 <details>
                                     <p id="loss3"></p>
                                     <summary style="font-size: large;">最小训练损失</summary>
                                 </details>
                                 <details>
                                     <p id="loss4"></p>
                                     <summary style="font-size: large;">最小训练损失位置</summary>
                                 </details>
                             </div>
                             <div class="double-input7">
                                 <details>
                                     <p id="loss5"></p>
                                     <summary style="font-size: large">最大验证F1</summary>
                                 </details>
                                 <details>
                                     <p id="loss6"></p>
                                     <summary style="font-size: large">最大验证F1位置</summary>
                                 </details>

                                 <details>
                                     <p id="loss7"></p>
                                     <summary style="font-size: large">最大训练F1</summary>
                                 </details>
                                 <details>
                                     <p id="loss8"></p>
                                     <summary style="font-size: large">最大训练F1位置</summary>
                                 </details>
                             </div>
                         </div>
                    </div>
                </div>
            </div>
                </div>
			<!--大图-->

             <div class="card">
				<div class="card-body">
                    <a id="explain"></a>
                        <div class="card">
                        <div class="card-header" id="headingOne">
                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
                                    aria-expanded="true" aria-controls="collapseOne">
                                <strong style="font-size: 18px;color:dimgrey ">参数解释 <i style="font-size: 10px;"> (可点击模型名称查看详细解释)</i></strong>
                                <a href="#item" style="font-size: 15px;color:lightskyblue">    点这里返回顶部</a>
                            </button>
                        </div>
                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                             data-parent="#accordionExample">
                            <div class="card-body" style="font-size: 15px">
                                <div class="row">
                                     <div class="col-md-3">
                                     <div class="card">
                    <div class="card-body">

                        <div class="accordion custom-accordion">

                            <div class="accordion-row">
                                <a href="#" class="accordion-header" style="background-color:#75BDE0 ">
                                    <span><h5 ><strong>学习率</br>(lr)</strong></h5></span>
                                    <i class="accordion-status-icon close fa fa-leaf"></i>
                                    <i class="accordion-status-icon open fa fa-bookmark"></i>
                                </a>
                                <div class="accordion-body" style="font-size: 16px">
                                    <p>
                                        学习率是模型在进行梯度下降迭代时每次迭代的步长。学习率是一个不小于0的实数
                                    </p>
                                </div>
                            </div>

                            <div class="accordion-row open" >
                                <a href="#" class="accordion-header">
                                    <span><h5>推荐区间</h5></span>
                                    <i class="accordion-status-icon close fa fa-leaf"></i>
                                    <i class="accordion-status-icon open fa fa-bookmark"></i>
                                </a>
                                <div class="accordion-body" style="font-size: 16px">
                                     <p>
                                         <i class="fa fa-check" aria-hidden="true"></i>
                                         [1e-5, 1]
                                     </p>
                                </div>
                            </div>

                            <div class="accordion-row">
                                <a href="#" class="accordion-header">
                                    <span><h5>对模型的影响</h5></span>
                                    <i class="accordion-status-icon close fa fa-leaf"></i>
                                    <i class="accordion-status-icon open fa fa-bookmark"></i>
                                </a>
                                <div class="accordion-body" style="font-size: 16px">
                                     <p>
                                         <i class="fa fa-times" aria-hidden="true"></i>
                                         适中的学习率可以使模型快速收敛。过小的学习率会使得模型收敛时间较长，过大的学习率可能导致模型在最小值附近震荡，甚至不收敛。
                                     </p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                                     </div>
                                    <div class="col-md-3">

	<div class="card">
		<div class="card-body">

			<div class="accordion custom-accordion">

				<div class="accordion-row">
					<a href="#" class="accordion-header" style="background-color: #78D1D2">
						<span>
							<h5 >
								<strong>L1正则化系数(l1_penalty)</strong>
							</h5>
						</span>
						<i class="accordion-status-icon close fa fa-flash"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>L1正则化系数是模型L1损失的权重，是一个不小于0的实数</p>
					</div>
				</div>

				<div class="accordion-row open">
					<a href="#" class="accordion-header" style="background-color: white">
						<span>
							<h5>推荐区间</h5>
						</span>
						<i class="accordion-status-icon close fa fa-flash"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							<i class="fa fa-check" aria-hidden="true"></i>
							[1e-8, 1e-2]
						</p>
					</div>
				</div>

				<div class="accordion-row">
					<a href="#" class="accordion-header" style="background-color: white">
						<span>
							<h5> 对模型的影响</h5>
						</span>
						<i class="accordion-status-icon close fa fa-flash"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							<i class="fa fa-times" aria-hidden="true"></i>
							适当的L1正则化可以使模型收敛到一个稀疏解，从而实现模型的特征提取，并在一定程度上缓解过拟合现象。过小的L1正则化系数无法有效缓解过拟合现象，过大的L1正则化系数可能会使模型欠拟合
						</p>
					</div>
				</div>

			</div>
		</div>
	</div>

</div>

<div class="col-md-3">
	<div class="card">
		<div class="card-body">
			<div class="accordion custom-accordion">

				<div class="accordion-row">
					<a href="#" class="accordion-header" style="background-color: #97DBAE">
						<span>
							<h5 >
								<strong>L2正则化系数(l2_penalty)</strong>
							</h5>
						</span>
						<i class="accordion-status-icon close fa fa-pencil"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							L2正则化系数是模型L2损失的权重，是一个不小于0的实数
						</p>
					</div>
				</div>

				<div class="accordion-row open">
					<a href="#" class="accordion-header" style="background-color: white">
						<span>
							<h5>推荐区间</h5>
						</span>
						<i class="accordion-status-icon close fa fa-pencil"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							<i class="fa fa-check" aria-hidden="true"></i>
							[1e-8, 1e-2]
						</p>
					</div>
				</div>

				<div class="accordion-row">
					<a href="#" class="accordion-header" style="background-color: white">
						<span>
							<h5> 对模型的影响</h5>
						</span>
						<i class="accordion-status-icon close fa fa-pencil"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							<i class="fa fa-times" aria-hidden="true"></i>
							适当的L2正则化可以避免模型的权值矩阵过大，缓解模型过拟合问题。过小的L2正则化系数无法有效缓解过拟合现象，过大的L2正则化系数可能会使模型欠拟合。
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="col-md-3">
	<div class="card">
		<div class="card-body">
			<div class="accordion custom-accordion">

				<div class="accordion-row ">
					<a href="#" class="accordion-header" style="background-color:#CDE4AD">
						<span>
							<h5>
								<strong>训练轮数<br>(epochs)</strong>
							</h5>
						</span>
						<i class="accordion-status-icon close fa fa-puzzle-piece"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							训练轮数是整个训练集输入模型进行训练的次数。 是一个自然数。
						</p>
					</div>
				</div>

				<div class="accordion-row open">
					<a href="#" class="accordion-header" style="background-color: white">
						<span>
							<h5>推荐区间</h5>
						</span>
						<i class="accordion-status-icon close fa fa-puzzle-piece"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							<i class="fa fa-check" aria-hidden="true"></i>
							[300, 1500]
						</p>
					</div>
				</div>

				<div class="accordion-row">
					<a href="#" class="accordion-header" style="background-color: white">
						<span>
							<h5>对模型的影响</h5>
						</span>
						<i class="accordion-status-icon close fa fa-puzzle-piece"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							<i class="fa fa-times" aria-hidden="true"></i>
							适当的训练轮数可以使模型收敛到最优解。过小的训练轮数会使得模型欠拟合，过大的训练轮数会造成计算资源的浪费，并可能引发过拟合。
						</p>
					</div>
				</div>

			</div>
		</div>
	</div>

</div>
                                    <div class="col-md-3">

	<div class="card">
		<div class="card-body">
			<div class="accordion custom-accordion">

				<div class="accordion-row">
					<a href="#" class="accordion-header" style="background-color:#97DBAE ">
						<span>
							<h5>
								<strong>类别损失权重(loss_weight)</strong>
							</h5>
						</span>
						<i class="accordion-status-icon close fa fa-send"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							类别损失权重是在训练神经网络模型时，对不同类别的样本赋予不同的权重，以调整它们对损失函数的影响。类别损失权重是一个长度为类别个数的数组，数组中的每个值是不小于0的实数。
						</p>
					</div>
				</div>

				<div class="accordion-row open">
					<a href="#" class="accordion-header" style="background-color: white">
						<span>
							<h5> 推荐区间</h5>
						</span>
						<i class="accordion-status-icon close fa fa-send"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							<i class="fa fa-check" aria-hidden="true"></i>
							每个类别的权重反比于其在训练集中的占比，可以在这附调整。
						</p>
					</div>
				</div>

				<div class="accordion-row">
					<a href="#" class="accordion-header" style="background-color: white">
						<span>
							<h5> 对模型的影响</h5>
						</span>
						<i class="accordion-status-icon close fa fa-send"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							<i class="fa fa-times" aria-hidden="true"></i>
							类别损失权重可以解决训练集数据不平衡的问题。对在训练集中占少数的类别赋予较高的权重，可以提高模型对这种类别的关注度，从而使模型总体表现提高
						</p>
					</div>
				</div>

			</div>
		</div>
	</div>

</div>
                                     <div class="col-md-3">
	<div class="card">
		<div class="card-body">
			<div class="accordion custom-accordion">
				<div class="accordion-row ">
					<a href="#" class="accordion-header" style="background-color:#C3E5AE ">
						<span>
							<h5>
								<strong>学习率衰减步长(step_size)</strong>
							</h5>
						</span>
						<i class="accordion-status-icon close fa fa-star"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							学习率衰减是指在神经网络模型训练过程中，随着迭代次数的增加，逐步减小学习率的大小，以调整模型优化过程中参数更新的幅度。学习率衰减步长决定学习率衰减器间隔多少轮对学习率进行衰减。学习率衰减步长是一个自然数。
						</p>
					</div>
				</div>
				<div class="accordion-row open">
					<a href="#" class="accordion-header" style="background-color: white">
						<span>
							<h5> 推荐区间</h5>
						</span>
						<i class="accordion-status-icon close fa fa-star"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							<i class="fa fa-check" aria-hidden="true"></i>
							[50, 500]
						</p>
					</div>
				</div>
				<div class="accordion-row">
					<a href="#" class="accordion-header" style="background-color: white">
						<span>
							<h5>对模型的影响</h5>
						</span>
						<i class="accordion-status-icon close fa fa-star"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							<i class="fa fa-times" aria-hidden="true"></i>
							适中的学习率衰减步长可以加快模型的收敛速度。
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
                               <div class="col-md-3">
	<div class="card">
		<div class="card-body">

			<div class="accordion custom-accordion">

				<div class="accordion-row">
					<a href="#" class="accordion-header" style="background-color: #F1E1A6 ">
						<span>
							<h5 >
								<strong>学习率衰减率<br>(gamma)</strong>
							</h5>
						</span>
						<i class="accordion-status-icon close fa fa-heart"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							学习率衰减是指在神经网络模型训练过程中，随着迭代次数的增加，逐步减小学习率的大小，以调整模型优化过程中参数更新的幅度。学习率衰减率决定学习率衰减器每次进行衰减时对学习率乘以的系数。学习率衰减率是一个0到1之间的实数。
						</p>
					</div>
				</div>

				<div class="accordion-row open">
					<a href="#" class="accordion-header">
						<span>
							<h5> 推荐区间</h5>
						</span>
						<i class="accordion-status-icon close fa fa-heart"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							<i class="fa fa-check" aria-hidden="true"></i>
							[0, 1]
						</p>
					</div>
				</div>

				<div class="accordion-row">
					<a href="#" class="accordion-header">
						<span>
							<h5>对模型的影响</h5>
						</span>
						<i class="accordion-status-icon close fa fa-heart"></i>
						<i class="accordion-status-icon open fa fa-bookmark"></i>
					</a>
					<div class="accordion-body" style="font-size: 16px">
						<p>
							<i class="fa fa-times" aria-hidden="true"></i>
							适中的学习率衰减率可以加快模型的收敛速度
						</p>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>
                                    <div class="col-md-3">
                                     <div class="card">
                    <div class="card-body">

                        <div class="accordion custom-accordion">

                            <div class="accordion-row ">
                                <a href="#" class="accordion-header" style="background-color:#F4BBBB">
                                    <span><h5 ><strong>动量</br>(momentum)</strong></h5></span>
                                    <i class="accordion-status-icon close fa fa-commenting"></i>
                                    <i class="accordion-status-icon open fa fa-bookmark"></i>
                                </a>
                                <div class="accordion-body" style="font-size: 16px">
                                    <p>
                                        优化器引入动量后，每次参数更新时会引入一个加速因子momentum，该因子会积累之前的参数更新方向和速度，从而形成一种“惯性”。这样，即使在梯度方向变化较小的情况下，参数更新仍然可以保持一定的速度和方向，从而更快地达到最优解
                                    </p>
                                </div>
                            </div>

                            <div class="accordion-row open" >
                                <a href="#" class="accordion-header">
                                    <span><h5> 推荐区间</h5></span>
                                    <i class="accordion-status-icon close fa fa-commenting"></i>
                                    <i class="accordion-status-icon open fa fa-bookmark"></i>
                                </a>
                                <div class="accordion-body" style="font-size: 16px">
                                     <p>
                                         <i class="fa fa-check" aria-hidden="true"></i>
                                        [0.6, 1]
                                     </p>
                                </div>
                            </div>

                            <div class="accordion-row">
                                <a href="#" class="accordion-header">
                                    <span><h5>对模型的影响</h5></span>
                                    <i class="accordion-status-icon close fa fa-commenting"></i>
                                    <i class="accordion-status-icon open fa fa-bookmark"></i>
                                </a>
                                <div class="accordion-body" style="font-size: 16px">
                                     <p>
                                         <i class="fa fa-times" aria-hidden="true"></i>
                                         适中的动量可以使模型有机会跳出局部最优解，增加到达全局最优解的概率。
                                     </p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                                     </div>
                                </div>
                            </div>
                        </div>
                    </div>



				</div>
			</div>

            </div>
		</main>
		<!-- end::main content -->

		<!-- begin::global scripts -->
		<script src="static/assets/vendors/bundle.js"></script>
		<!-- end::global scripts -->
		<!-- begin::custom scripts -->
		{#<script src="static/assets/js/custom.js"></script>#}
		<script src="static/assets/js/app.js"></script>
		<!-- end::custom scripts -->
		<script>
			document.getElementById("lr").value="0.05"
			    document.getElementById("l1_penalty").value="0.006"
			    document.getElementById("l2_penalty").value="0.000001"
			    document.getElementById("epochs").value="800"
			    document.getElementById("loss_weight1").value="1/5144"
			    document.getElementById("loss_weight2").value="1/1613"
			    document.getElementById("loss_weight3").value="1/3186"
			    document.getElementById("loss_weight4").value="1/844"
			    document.getElementById("loss_weight5").value="1/743"
			    document.getElementById("loss_weight6").value="1/554"
			    document.getElementById("step_size").value="400"
			    document.getElementById("gamma").value="0.7"
			    document.getElementById("momentum").value="0.9"
		</script>
        <script>

        window.addEventListener('load', function() {
          var savedData = localStorage.getItem('lossData');
          if (savedData) {
            var data = JSON.parse(savedData);
            document.getElementById('loss1').innerHTML = data['loss1'];
            document.getElementById('loss2').innerHTML = data['loss2'];
            document.getElementById('loss3').innerHTML = data['loss3'];
            document.getElementById('loss4').innerHTML = data['loss4'];
            document.getElementById('loss5').innerHTML = data['loss5'];
            document.getElementById('loss6').innerHTML = data['loss6'];
            document.getElementById('loss7').innerHTML = data['loss7'];
            document.getElementById('loss8').innerHTML = data['loss8'];
          }
        });
          function clearCacheAndRedirect(event) {
            // 清空缓冲区代码
            localStorage.removeItem('fileResult');
            localStorage.removeItem('lossData');
            // 执行其他操作，例如页面重定向
            window.location.href = event.target.href;

            // 取消默认行为
            {#event.preventDefault();#}
          }
          function handleSubmit() {
              var File1 = document.querySelector('input[name="train-file1"]');
              var modelNameInput = document.getElementById('model_name');
              if(File1.files.length==0) return;
              if (modelNameInput.value.trim() === '') return;

          // 创建 XMLHttpRequest 对象
          var xhr = new XMLHttpRequest();

          // 设置请求完成时的回调函数
          xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                document.getElementById('loading-animation').style.display = 'none';
                if(xhr.status === 200){
                    // 表单提交到后端的处理已完成
                    var response = JSON.parse(xhr.responseText);
                    var data=response.loss;
                      // 将每个loss的值填写到对应的p标签中
                      document.getElementById('loss1').innerHTML = data['loss1'];
                      document.getElementById('loss2').innerHTML = data['loss2'];
                      document.getElementById('loss3').innerHTML = data['loss3'];
                      document.getElementById('loss4').innerHTML = data['loss4'];
                      document.getElementById('loss5').innerHTML = data['loss5'];
                      document.getElementById('loss6').innerHTML = data['loss6'];
                      document.getElementById('loss7').innerHTML = data['loss7'];
                      document.getElementById('loss8').innerHTML = data['loss8'];
                    localStorage.setItem('lossData', JSON.stringify(data));
                    swal({
                        title:  "训练已完成!" ,
                        text:  null ,
                        icon:  "success" ,
                        buttons:{
                            OK: true,
                        },
                        }).then(function(OK) {
                            if (OK) {
                            window.location.reload();
                            }
                            });
                }
                else {
                    swal({
                        title:  "您上传的训练csv文件不合法" ,
                        text:  null ,
                        icon:  "error" ,
                        buttons:{
                            OK:true,
                        },
                        }).then(function(OK) {
                            if (OK) {
                            window.location.reload();
                            }
                            });

                    {#location.reload();#}
                }
            }
          };
          var loadingAnimation = document.getElementById('loading-animation');
          loadingAnimation.style.display = 'block';
          loadingAnimation.style.top = '50%';
          loadingAnimation.style.left = '50%';
          loadingAnimation.style.backgroundColor = 'transparent';
          // 提交表单
          xhr.open('POST', '/upload_train', true);
          xhr.send(new FormData(document.querySelector('form')));
        }
        </script>
	</body>
</html>